<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
	<script src="js/echarts.js"></script>

</head>

<body>
	<!---为ECharts准备一个具备大小（宽高）的DOM--->
	<div id="main" style="width: 800px; height: 600px"></div>
	<script type="text/javascript">
		//基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		//指定图表的配置项和数据
		var option = {  //指定图表的配置项和数据
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
			title: {  //配置标题组件
				text: '多仪表盘实例 (共四个仪表盘)',
				x: 'center', y: 100,
				show: true,  //设置是否显示标题，默认true
				offsetCenter: [50, "20%"],  //设置相对于仪表盘中心的偏移
				textStyle: {
					fontFamily: "黑体",  //设置字体名称，默认宋体
					color: "blue",  //设置字体颜色，默认#333
					fontSize: 20,  //设置字体大小，默认15
				}
			},
			tooltip: { formatter: "{a} <br/>{c} {b}" },  //配置提示框组件
			series: [  //配置数据系列，共有4个仪表盘
				{   //设置数据系列之1：速度
					name: '速度', type: 'gauge', z: 3,
					min: 0,  //设置速度仪表盘的最小值
					max: 220,  //设置速度仪表盘的最大值
					splitNumber: 22,  //设置速度仪表盘的分隔数目为22
					radius: '50%',  //设置速度仪表盘的大小
					axisLine: { lineStyle: { width: 10 } },
					axisTick: {  //设置坐标轴小标记
						length: 15,  //设置属性length控制线长
						splitNumber: 5,  //设置坐标轴小标记的分隔数目为5
						lineStyle: {  //设置属性lineStyle控制线条样式
							color: 'auto'
						}
					},
					splitLine: { length: 20, lineStyle: { color: 'auto' } },
					title: { textStyle: { fontWeight: 'bolder', fontSize: 20, fontStyle: 'italic' } },
					detail: { textStyle: { fontWeight: 'bolder' } },
					data: [{ value: 40, name: '车速(km/h)' }]
				},
				{   //设置数据系列之2：转速
					name: '转速', type: 'gauge',
					center: ['20%', '55%'],  //设置转速仪表盘中心点的位置，默认全局居中
					radius: '35%',  //设置转速油表仪表盘的大小
					min: 0,  //设置转速仪表盘的最小值
					max: 7,  //设置转速仪表盘的最大值
					endAngle: 45,
					splitNumber: 7,  //设置转速仪表盘的分隔数目为7
					axisLine: { lineStyle: { width: 8 } },  //设置属性lineStyle控制线条样式
					axisTick: {  //设置坐标轴小标记
						length: 12,  //设置属性length控制线长
						splitNumber: 5,  //设置坐标轴小标记的分隔数目为5
						lineStyle: {  //设置属性lineStyle控制线条样式
							color: 'auto'
						}
					},
					splitLine: {  //设置分隔线
						length: 20,  //设置属性length控制线长
						lineStyle: {  //设置属性lineStyle（详见lineStyle）控制线条样式
							color: 'auto'
						}
					},
					pointer: { width: 5 },
					title: { offsetCenter: [0, '-30%'], },
					detail: { textStyle: { fontWeight: 'bolder' } },
					data: [{ value: 1.5, name: '转速(x1000 r/min)' }]
				},
				{   //设置数据系列之3：油表
					name: '油表', type: 'gauge',
					center: ['77%', '50%'],  //设置油表仪表盘中心点的位置，默认全局居中
					radius: '25%',  //设置油表仪表盘的大小
					min: 0,  //设置油表仪表盘的最小值
					max: 2,  //设置油表仪表盘的最小值
					startAngle: 135, endAngle: 45,
					splitNumber: 2,  //设置油表的分隔数目为2
					axisLine: { lineStyle: { width: 8 } },  //设置属性lineStyle控制线条样式
					axisTick: {  //设置坐标轴小标记
						splitNumber: 5,  //设置小标记分隔数目为5
						length: 10,  //设置属性length控制线长
						lineStyle: {  //设置属性lineStyle控制线条样式
							color: 'auto'
						}
					},
					axisLabel: {
						formatter: function (v) {
							switch (v + '') {
								case '0': return 'E';
								case '1': return '油表';
								case '2': return 'F';
							}
						}
					},
					splitLine: {  //设置分隔线
						length: 15,  //设置属性length控制线长
						lineStyle: {  //设置属性lineStyle（详见lineStyle）控制线条样式
							color: 'auto'
						}
					},
					pointer: { width: 4 },  //设置油表的指针宽度为4
					title: { show: false },
					detail: { show: false },
					data: [{ value: 0.5, name: 'gas' }]
				},
				{   //设置数据系列之4：水表
					name: '水表', type: 'gauge',
					center: ['77%', '50%'],  //设置水表仪表盘中心点的位置，默认全局居中
					radius: '25%',  //设置水表仪表盘的大小
					min: 0,  //设置水表的最小值
					max: 2,  //设置水表的最大值
					startAngle: 315, endAngle: 225,
					splitNumber: 2,  //设置分隔数目
					axisLine: {  //设置坐标轴线
						lineStyle: {  //设置属性lineStyle控制线条样式
							width: 8  //设置线条宽度
						}
					},
					axisTick: { show: false },  //设置不显示坐标轴小标记
					axisLabel: {
						formatter: function (v) {
							switch (v + '') {
								case '0': return 'H';
								case '1': return '水表';
								case '2': return 'C';
							}
						}
					},
					splitLine: {  //设置分隔线
						length: 15,  //设置属性length控制线长
						lineStyle: {  //设置属性lineStyle（详见lineStyle）控制线条样式
							color: 'auto'
						}
					},
					pointer: { width: 2 },  //设置水表的指针宽度为2
					title: { show: false },
					detail: { show: false },
					data: [{ value: 0.5, name: 'gas' }]
				}
			]
		};
		setInterval(function () {
			option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
			option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
			option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
			option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
			myChart.setOption(option, true);
		}, 2000);  //每间2秒重新渲染一次，以实现动态效果
	</script>
</body>

</html>